<template>
	<div class="role-container">
		<el-form label-width="120px" class="el_form" style="flex-wrap: wrap">
			<el-form-item label="订单号：" class="el_form_item">
				<el-input v-model="queryFrom.orderNo" placeholder="请输入订单号"></el-input>
			</el-form-item>

			<el-form-item label="收货人名称：" class="el_form_item">
				<el-input v-model="queryFrom.consigneeName" placeholder="请输入收货人名称"></el-input>
			</el-form-item>

			<el-form-item label="下单时间：" class="el_form_item" style="width: 500px">
				<el-date-picker
					v-model="queryFrom.time"
					type="daterange"
					range-separator="To"
					start-placeholder="下单开始时间"
					end-placeholder="下单结束时间"
				/>
			</el-form-item>

			<el-form-item label="状态：" class="el_form_item">
				<el-select v-model="queryFrom.orderStatus" placeholder="请选择订单状态">
					<el-option label="待支付" :value="0"></el-option>
					<el-option label="待发货" :value="1"></el-option>
					<el-option label="已发货" :value="2"></el-option>
					<el-option label="已完成" :value="3"></el-option>
					<el-option label="已关闭" :value="4"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="结算状态：" class="el_form_item">
				<el-select v-model="queryFrom.settleStatus" placeholder="请选择结算状态">
					<el-option label="未结算" :value="0"></el-option>
					<el-option label="已结算" :value="1"></el-option>
				</el-select>
			</el-form-item>

			<!-- <el-form-item label="订单平台：" class="el_form_item">
				<el-select v-model="queryFrom.appType" placeholder="请选择订单平台">
					<el-option label="支付宝" :value="0"></el-option>
					<el-option label="微信" :value="1"></el-option>
				</el-select>
			</el-form-item> -->

			<!-- <el-form-item label="订单来源：" class="el_form_item">
				<el-select v-model="queryFrom.fromType" placeholder="请选择订单来源">
					<el-option label="私域订单" :value="0"></el-option>
					<el-option label="公域订单" :value="1"></el-option>
				</el-select>
			</el-form-item> -->

			<el-button type="primary" @click="getData">查询</el-button>
			<el-button type="primary" @click="restData" plain>重置</el-button>
		</el-form>

		<div style="display: flex; gap: 15px; float: right; margin-right: 20px">
			<el-button type="success" @click="doExportFn" size="default">批量导出</el-button>

			<el-upload ref="upload" :headers="uploadHeader" class="upload-demo" :action="uploadUrl" :limit="1" :on-success="onUploadSuccess">
				<el-button type="danger" size="default">批量发货</el-button>
			</el-upload>

			<el-upload ref="upload" :headers="uploadHeader" class="upload-demo" :action="uploadUrlSettle" :limit="1" :on-success="onUploadSuccessSettle">
				<el-button type="warning" size="default">批量结算</el-button>
			</el-upload>
		</div>

		<table-components :tableLoading="tableLoading" :tableData="tableData" @currentChange="currentChange">
			<!-- <el-table-column prop="fromType" label="订单来源" align="center" width="110">
				<template v-slot="scope">
					<el-tag type="warning" v-if="scope.row.fromType == 0">私域订单</el-tag>
					<el-tag v-if="scope.row.fromType == 1">公域订单</el-tag>
				</template>
			</el-table-column> -->
			<!-- <el-table-column prop="appType" label="订单平台" align="center" width="110">
				<template v-slot="scope">
					<el-tag v-if="scope.row.appType == 0">支付宝</el-tag>
					<el-tag type="success" v-if="scope.row.appType == 1">微信</el-tag>
				</template>
			</el-table-column> -->

			<el-table-column prop="orderNo" label="订单号" align="center" width="150" />
			<el-table-column label="商品名称" align="center" width="250">
				<template v-slot="scope">
					{{ scope.row.detailVO.goodsName }}
				</template>
			</el-table-column>

			<el-table-column label="购买数量" align="center" width="100">
				<template v-slot="scope">
					{{ scope.row.detailVO.skuNum }}
				</template>
			</el-table-column>
			<el-table-column label="订单状态" align="center" width="110">
				<template v-slot="scope">
					<el-tag v-if="scope.row.orderStatus == 0">待支付</el-tag>
					<el-tag type="danger" v-if="scope.row.orderStatus == 1">待发货</el-tag>
					<el-tag type="success" v-if="scope.row.orderStatus == 2">待收货</el-tag>
					<el-tag type="info" v-if="scope.row.orderStatus == 3">已完成</el-tag>
					<el-tag type="info" v-if="scope.row.orderStatus == 4">已关闭</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="orderTime" label="订单金额(元)" align="center" width="150">
				<template v-slot="scope">
					<div class="fee">
						<div><text>商品总金额：</text>{{ scope.row.goodsAmount }}</div>
						<div><text> 运费金额：</text>{{ scope.row.expressAmount }}</div>
						<div><text> 共计：</text>{{ scope.row.orderAmount }}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="订单时间" align="center" width="230">
				<template v-slot="scope">
					<div class="fee">
						<div><text>下单时间：</text>{{ scope.row.orderTime }}</div>
						<div><text>支付时间：</text>{{ scope.row.payTime ? scope.row.payTime : '-' }}</div>
						<div><text>发货时间：</text>{{ scope.row.sendTime ? scope.row.sendTime : '-' }}</div>
						<div><text>完成时间：</text>{{ scope.row.finishTime ? scope.row.finishTime : '-' }}</div>
						<div style="color: #c98f38; font-weight: 600"><text>结算时间：</text>{{ scope.row.settleStatus == 1 ? scope.row.settleTime : '-' }}</div>
					</div>
				</template>
			</el-table-column>

			<!-- <el-table-column prop="userNickName" label="用户昵称" align="center" width="100" /> -->
			<!-- <el-table-column prop="consigneeName" label="收货信息" align="center" min-width="150">
				<template v-slot="scope">
					<div class="fee">
						<div><text>用户昵称：</text>{{ scope.row.userNickName }}</div>
						<div><text>收货人：</text>{{ scope.row.consigneeName }}</div>
						<div><text>电话：</text>{{ scope.row.consigneePhone }}</div>
					</div>
				</template>
			</el-table-column> -->

			<el-table-column prop="consigneeaRemark" label="买家备注" align="center" min-width="150" />
			<el-table-column prop="consigneeaRemark" label="商家备注" align="center" min-width="150" />

			<el-table-column label="发货信息" align="center" min-width="150">
				<template v-slot="scope">
					<div class="fee" v-if="scope.row.expressName">
						<div><text>快递公司：</text>{{ scope.row.expressName }}</div>
						<div><text>快递单号：</text>{{ scope.row.expressNo }}</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="操作" align="center" fixed="right" width="120">
				<template v-slot="scope">
					<el-button type="text" @click="sendOutGoods(scope.row)" v-if="scope.row.orderStatus == 1">发货</el-button>
				</template>
			</el-table-column>
		</table-components>

		<send :dialogVisible="dialogVisible" :row="clickItem" @handleClose="handleClose"></send>

		<el-dialog v-model="centerDialogVisible" title="发货失败" width="60%" align-center>
			<div style="white-space: pre-wrap">{{ uploadErrorMsg }}</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="centerDialogVisible = false">关闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="role">
import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { NextLoading } from '/@/utils/loading';
import TableComponents from '/@/components/tableComponents/index.vue';
import { getOrderList, doExport } from '/@/api/api';
import send from './dialog/send.vue';
import moment from 'moment';
import { Session } from '/@/utils/storage';

const upload = ref();
const clickItem = ref();
const dialogVisible = ref(false);
const queryFrom = ref({});
const tableLoading = ref(false);
const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});

onMounted(() => {
	getData();
});
const uploadUrl = ref(import.meta.env.VITE_API_URL + 'site/order/import');
const uploadUrlSettle = ref(import.meta.env.VITE_API_URL + 'site/order/settleBatch');

const uploadHeader = ref({
	'auth-token': `${Session.get('token')}`,
});

function restData() {
	for (let key in queryFrom.value) {
		delete queryFrom.value[key];
	}

	tableData.page = 1;
	getData();
}

async function getData() {
	tableLoading.value = true;
	if (queryFrom.value.time) {
		queryFrom.value.startTime = queryFrom.value.time[0] ? moment(queryFrom.value.time[0]).format('YYYY-MM-DD hh:mm:ss') : null;
		queryFrom.value.endTime = queryFrom.value.time[1] ? moment(queryFrom.value.time[1]).format('YYYY-MM-DD hh:mm:ss') : null;

		// delete queryFrom.value.time;
	} else {
		delete queryFrom.value.startTime;
		delete queryFrom.value.endTime;
	}

	let par = {
		page: tableData.page,
		size: tableData.size,
		...queryFrom.value,
	};

	let { code, data } = await getOrderList(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		tableLoading.value = false;
	}
}

//发货
function sendOutGoods(item) {
	clickItem.value = item;
	dialogVisible.value = true;
}

function currentChange(page) {
	tableData.page = page;
	getData();
}

function handleClose() {
	clickItem.value = {};
	dialogVisible.value = false;
	getData();
}

async function doExportFn() {
	tableLoading.value = true;
	if (queryFrom.value.time) {
		queryFrom.value.startTime = queryFrom.value.time[0] ? moment(queryFrom.value.time[0]).format('YYYY-MM-DD hh:mm:ss') : null;
		queryFrom.value.endTime = queryFrom.value.time[1] ? moment(queryFrom.value.time[1]).format('YYYY-MM-DD hh:mm:ss') : null;

		// delete queryFrom.value.time;
	} else {
		delete queryFrom.value.startTime;
		delete queryFrom.value.endTime;
	}

	let par = {
		page: tableData.page,
		size: tableData.size,
		...queryFrom.value,
	};
	let res = await doExport(par);

	const a = document.createElement('a');
	document.body.appendChild(a);
	a.style.display = 'none';
	// window.open(res);
	const url = window.URL.createObjectURL(res);
	a.href = url;
	a.download = '订单导出.xlsx';
	a.click();
	// 移除a标签和url对象
	document.body.removeChild(a);
	window.URL.revokeObjectURL(url);
	tableLoading.value = false;
}

const centerDialogVisible = ref(false);
const uploadErrorMsg = ref('');
async function onUploadSuccess(res) {
	if (res.code == 500) {
		ElMessage.error(res.msg);
		upload.value.clearFiles();
	}

	if (res.code == 501) {
		centerDialogVisible.value = true;
		uploadErrorMsg.value = res.msg;
		upload.value.clearFiles();
	}
}

async function onUploadSuccessSettle(res) {
	if (res.code == 500) {
		ElMessage.error(res.msg);
		upload.value.clearFiles();
	}

	if (res.code == 501) {
		centerDialogVisible.value = true;
		uploadErrorMsg.value = res.msg;
		upload.value.clearFiles();
	}

	if (res.code == 200) {
		ElMessage.success('结算成功');
		getData();
	}
}
</script>

<style scoped lang="scss">
@import url('/@/theme/page/page.scss');

.fee {
	display: flex;
	flex-direction: column;
	text-align: left;

	text {
		font-weight: 600;
	}
}

.msgbox {
	width: 800px;
}
</style>
